<template>
  <fieldset class="ones">
   <p>应支付￥{{ sonsum }}，请选择支付方式：</p>
        <aside>
          <ul>
            <li><input type="radio" value="货到付款" name="pay" v-model="payf"/><span>货到付款</span></li>
            <li><input type="radio" value="支付宝支付" name="pay" v-model="payf"/><span>支付宝支付</span></li>
            <li><input type="radio" value="微信支付" name="pay" v-model="payf"/><span>微信支付</span></li>
          </ul>
          <ul>
            <li><input type="radio" value="农行卡支付" name="pay" v-model="payf"/><span>农行卡支付</span></li>
            <li><input type="radio" value="工行卡支付" name="pay" v-model="payf"/><span>工行卡支付</span></li>
            <li><input type="radio" value="其他支付方式" name="pay" v-model="payf"/><span>其他支付方式</span></li>
          </ul>
      </aside>
        <form action="" @submit.prevent="btn2()"><input type="submit" value="提交"></form>
  </fieldset>
</template>

<script setup>

import { ref } from 'vue'
let Obj = defineProps(['sonsum'])
let payf = ref('');
const btn2 =()=>{
  console.log(Obj.sonsum);
  if (payf.value!= '') {
     var ti = confirm('你选择的支付方式是'+payf.value+' , '+'支付金额￥'+Obj.sonsum.value+' , '+'是否确认支付？');
  
  }
  if (ti == true) {
    alert('支付成功');
  }else{
    alert('支付失败');
  }
  
}
</script>

<style scoped>
.ones{
  height: 200px;
  border: 1px solid greenyellow;
  width: 500px;
  margin:0 auto;
  border-radius: 45px;
}
.ones p{
  text-align: center;
}
.ones aside ul{
  list-style: none;
  display: flex;
  
}
.ones form input{
  margin-left: 300px;
  background-color: rgb(0, 140, 255);
  color: white;
  border: 0;
  width: 150px;
  line-height: 30px;
  border-radius: 8px;
  
}
</style>